<template>
  <el-card style="margin-top: 20px">
    <el-button type="primary" @click="handleAdd">新增部门</el-button>
    <el-table
        style="margin-top: 20px"
        :data="deptTree"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="部门名称" align="left" header-align="center">
        <template #default="{ row }">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述"/>
      <el-table-column prop="leaderId" label="负责人"/>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="handleAdd(row)">新增</el-button>
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑部门对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="部门名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="上级部门">
          <el-cascader
              v-model="form.parentId"
              :options="deptTree"
              :show-all-levels="false"
              :props="{
              emitPath:false,
              value: 'id',
              label: 'name',
              children: 'children',
              checkStrictly: true,
            }"
              placeholder="请选择"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="生效">
          <el-switch v-model="form.isActive"></el-switch>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="form.leaderId"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="handleSubmit">提交</el-button>
            </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {GetDepartmentList, AddDepartment, UpdateDepartment, DeleteDepartment, GetDepartmentTree} from "@/api/index.js";

export default {
  data() {
    return {
      deptTree: [],
      dialogVisible: false,
      dialogTitle: "新增部门",
      form: {
        id: "",
        name: "",
        parentId: "",
        description: "",
        isActive: true,
        leaderId: "",
      },
    };
  },
  created() {
    this.getDeptTree();
  },
  methods: {
    getDeptTree() {
      GetDepartmentTree().then((res) => {
        this.deptTree = res.data;
      });
    },
    handleAdd(row) {
      this.dialogTitle = "新增部门";
      this.form = {
        id: "",
        name: "",
        parentId: row ? row.id : "",
        description: "",
        isActive: true,
        leaderId: "",
      };
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogTitle = "编辑部门";
      this.form = {...row};
      this.dialogVisible = true;
    },
    // 删除部门
    handleDelete(row) {
      this.$confirm("确认删除该部门吗？", "提示", {
        type: "warning",
      }).then(() => {
        DeleteDepartment(row.id).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
          }
          this.getDeptTree(); // 刷新列表
        });
      })
          .catch(() => {
            this.$message.info("已取消删除");
          });
    },
    // 提交表单（新增/编辑）
    handleSubmit() {
      if (this.dialogTitle === "新增部门") {
        AddDepartment(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("新增成功");
          }
          this.dialogVisible = false;
          this.getDeptTree(); // 刷新列表
        });
      } else {
        UpdateDepartment(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("更新成功");
          }
          this.dialogVisible = false;
          this.getDeptTree(); // 刷新列表
        });
      }
    },
  }
}
</script>